{% extends "mall/base.html" %}

{% block title %}
    屏幕商城
{% endblock %}

{% block css %}

    <style>
        body {
            background: #eee;
        }

        .goods-list {
            margin-top: 0px;
        }

        .goods-list li {
            list-style: none;
            width: 33.33333%;
            height: 300px;
            float: left;
            text-align: center;
        }

        .goods-list li .item {
            padding: 10px 10px 10px 10px;
            margin: 5px;
            background: white;
            position: relative;
            height: 260px;
        }

        .description {
            text-overflow: ellipsis;
            overflow: hidden;
            background: white;
            white-space: nowrap;
            color: black;
            font-size: 18px;
        }

        .item-button {
            height: 50px;
            line-height: 50px;
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 0;
            background: #e4393c;
            color: white;
            font-weight: bolder;
            font-size: 30px;
        }

        .price {
            font-size: 18px;
            color: #e4393c;
            font-weight: 700;
            line-height: 1.3;
            display: inline-block;
        }
    </style>
{% endblock %}

{% block header %}
    {#        {% include 'component/pad-suspend.html' %}#}
    <div style="width: 260px;position: fixed;right: 0;top:0;z-index: 1000;">
        <!-- <div class="fa-hover" onclick="location.href='/cart?device_id={{ device_id }}'"
             style="font-size: 40px;width: 100px;float: left;"><i style="color: #e4393c"
                                                                  class="fa fa-shopping-cart"
                                                                  aria-hidden="true"></i>
            <span class="weui-badge" id="cartCount">{{ cart_count }}</span>
        </div> -->

        <div class="fa-hover" onclick="location.href='/pad/order?device_id={{ device_id }}'"
             style="font-size: 40px;width: 100px;float: right">
            <i style="color: #e4393c" class="fa fa-user" aria-hidden="true"></i>
            <span class="sr-only"></span>
        </div>
    </div>
{% endblock %}

{% block content %}
    <input type="hidden" name="device_id" value="{{ device_id }}">
    <ul class="goods-list">
        {% for foo in goods_array %}
            <li>
                <div class="item"
                onclick="location.href='/pad/mall/detail/{{ foo.sdef_goods_id }}?device_id={{ device_id }}'">
                    <div style="height: 160px;">
                        <img src="{{ foo.sdef_goods_thumbnail|json_loads|get_item(0) }}"
                             style="max-width: 50%;height: auto;width: auto"
                             alt="">
                    </div>
                    <p class="description">{{ foo.sdef_goods_name }}</p>
                    <p class="price">¥{{ foo.sdef_goods_price }}&nbsp;<i style="color:#731112; visibility: hidden">(会员¥{{ foo.sdef_goods_member_price }})</i></p>
                    <div class="item-button" data-id="{{ foo.sdef_goods_id }}">
                        立即购买
                    </div>
                </div>
            </li>
        {% endfor %}
    </ul>

{% endblock %}

{% block footer %}

{% endblock %}

{% block js %}
    <script src="{{ STATIC_URL }}/static/lib/js.cookie.js?v={{ version_code }}"></script>
    <script src="{{ STATIC_URL }}/static/js/pad_mall/mall.js?v={{ version_code }}"></script>
{% endblock %}